<template>
    <view class="cu-form-group reg" :class="isFocus?'':''">
		<view class="text-gray title" v-if='label'>{{label}}</view>
		<image class="text-gray icon" :src="icon" v-if="icon"></image>
		<view class="input-box">
			<view class="input-title">{{placeholder}}</view>
			<input :focus="focus_" :type="inputType" :value="value" @input="onInput" class="m-input-input" :placeholder="placeholder"
			    :password="type==='password'&&!showPassword" @focus="onFocus" @blur="onBlur"  :maxlength="maxLength" :disabled="disabled"
				placeholder-style="color:rgba(198,198,199,1);"/>
		</view>
    	

		<!-- 获取图形验证码 -->
		<view v-if="imageCode" class="m-input-icon">
			<img :src='imageUrl.code' @tap="getImgCode"></img>
		</view>
		<slot class="m-input-icon">
			
		</slot>
		
    </view>
</template>

<script>

    export default {
        props: {
            /**
             * 输入类型
             */
            type: String,
            /**
             * 值
             */
            value: String,
            /**
             * 占位符
             */
            placeholder: String,
            /**
             * 是否显示清除按钮
             */
            clearable: {
                type: [Boolean, String],
                default: false
            },
            /**
             * 是否显示密码可见按钮
             */
            displayable: {
                type: [Boolean, String],
                default: false
            },
            /**
             * 自动获取焦点
             */
            focus: {
                type: [Boolean, String],
                default: false
            },
			/*
			 * maxLength
			 */
			maxLength:{
				type:Number,
				default:1000
			},
			/* 
			 * 是否禁用
			 */
			disabled:{
				type:Boolean,
				default:false
			},
			/*
			 * 是否为图形验证码
			 */
			imageCode:{
				type:Boolean,
				default:false
			},
			label:{
				type:String,
				default:''
			},
			icon:{
				type:String,
				default:''
			}
        },
        model: {
            prop: 'value',
            event: 'input'
        },
        data() {
            return {
                /**
                 * 显示密码明文
                 */
                showPassword: false,
                /**
                 * 是否获取焦点
                 */
                isFocus: false,
				/**
				 * 图形验证码
				 */
				imageUrl: {
					code:''
				}
            }
        },
        computed: {
            inputType() {
                const type = this.type
                return type === 'password' ? 'text' : type
            },
            clearable_() {
                return String(this.clearable) !== 'false'
            },
            displayable_() {
                return String(this.displayable) !== 'false'
            },
            focus_() {
                return String(this.focus) !== 'false'
            }
        },
        methods: {
			async getImgCode() {
				this.imageUrl = await this.$apis.getImgCode();
				console.log(this.imageUrl)
			},
            clear() {
                // this.value = ''
				this.$emit("input","")
            },
            display() {
                this.showPassword = !this.showPassword
            },
            onFocus() {
                this.isFocus = true
            },
            onBlur(e) {
                this.$nextTick(() => {
                    this.isFocus = false
					this.$emit("onblur",e)
                })
            },
            onInput(e) {
                this.$emit('input', e.target.value)
            }
        }
    }
</script>

<style lang="scss" scoped>
	.cu-form-group{
		// border-bottom: 1rpx solid #C6C6C7;
		padding: 0 33rpx;
		text-align: left;
		border-radius: 12rpx;
	}
	.reg{
		min-height: 164rpx;
	}
	.cu-form-group.cur{
		border-bottom: 4rpx solid #FF8441;
	}
	.input-box{
		flex:1;
	}
    .m-input-view {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        flex: 1;
        padding: 30rpx 0;
    }
	.input-title{
		padding: 0rpx 24rpx 10rpx 24rpx;
		font-size: 30rpx;
		font-weight: 600;
	}
    .m-input-input {
        flex: 1;
        width: 100%;
		font-size:28rpx;
		font-family:PingFang SC;
		color:rgba(80,82,85,1);
		padding: 0 24rpx;
    }
    
    .m-input-icon image{
        width: 210rpx;
		height: 70rpx;
		vertical-align: middle;
    }
	.cu-form-group .title{
		font-size: 24rpx;
	}
	.cu-form-group .icon{
		width: 40rpx;
		height: 40rpx;
	}
</style>

